<template>
  <div class="app-container leave-apply">
    <div class="head-container">
      <div>
        <el-select v-model="search.status" class="filter-item" placeholder="请选择状态">
          <el-option label="进行中" value="2"/>
          <el-option label="已结束" value="3"/>
        </el-select>
        <el-button class="filter-item" type="success" icon="el-icon-search" size="mini" @click="fetchData">搜索
        </el-button>
      </div>
    </div>
    <div class="head-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="编号" width="280" align="center">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名" width="150">
          <template slot-scope="scope">
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型" width="150">
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>
        <el-table-column label="请假日期" min-width="400" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.startTime }} {{ scope.row.startType }} 至 {{ scope.row.endTime }} {{ scope.row.endType }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="申请日期" width="160" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.applyTime }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <wf-status :status="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="250">
          <template slot-scope="scope">
            <work-flow-btn :row="scope.row" :type="3" @edit="edit" @approve="approve" @detail="detail"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-if="dialogVisible"
      title="请假申请"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-tabs tab-position="right">
        <el-tab-pane label="详细信息">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="form.userName"/>
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="form.type" class="search-item" placeholder="请选择类型">
                <el-option label="事假" value="事假"/>
                <el-option label="病假" value="病假"/>
                <el-option label="产假" value="产假"/>
              </el-select>
            </el-form-item>
            <el-form-item label="开始时间">
              <el-col :span="12">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%;"
                />
              </el-col>
              <el-col :span="12">
                <el-radio-group v-model="form.startType" size="medium" style="padding-left: 10px">
                  <el-radio border label="上午"/>
                  <el-radio border label="下午"/>
                </el-radio-group>
              </el-col>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-col :span="12">
                <el-date-picker
                  v-model="form.endTime"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%;"
                />
              </el-col>
              <el-col :span="12">
                <el-radio-group v-model="form.endType" size="medium" style="padding-left: 10px">
                  <el-radio border label="上午"/>
                  <el-radio border label="下午"/>
                </el-radio-group>
              </el-col>
            </el-form-item>
            <el-form-item label="请假事由">
              <el-input v-model="form.remark" type="textarea"/>
            </el-form-item>

            <pop-btn
              :row="form"
              :type='3'
              procDefkey="Leave"
              @save="onSave"
              @approve="onApprove"
              @cancel="cancel"
            />
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="审批记录">
          <wf-process :inst-id="form.procInstId"/>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
  import {doneList, saveItem, completeItem} from '@/api/wf/leave'
  import {Message} from 'element-ui'
  import WorkFlowBtn from '@/components/WorkFlow/table'
  import PopBtn from '@/components/ExtBpmn/Btn/index'
  import WfStatus from '@/components/WorkFlow/status/index'
  import WfProcess from '@/components/WorkFlow/process/index'
  import approveMixin from '@/mixins/wfApproveMixin'

  export default {
    components: {
      WfProcess,
      WfStatus,
      PopBtn,
      WorkFlowBtn
    },
    mixins: [approveMixin],
    data() {
      return {
        search: {
          pageNo: 0,
          type: null,
          startTime: null,
          endTime: null,
          startUserName: null,
          status: null
        },
        form: {
          userName: null,
          type: null,
          startTime: null,
          endTime: null,
          startType: null,
          endType: null,
          remark: null
        },
        readOnly: true,
        dialogVisible: false,
        list: null,
        listLoading: true
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      cancel() {
        this.dialogVisible = false
      },
      approve(obj) {
        this.form = obj
        this.dialogVisible = true
      },
      edit(obj) {
        this.form = obj
        this.dialogVisible = true
      },
      detail(obj) {
        this.form = obj
        this.form.readOnly = true
        this.dialogVisible = true
      },
      onSave() {
        saveItem(this.form).then(res => {
          if (res.code === 200) {
            Message({
              message: '保存成功！',
              type: 'info'
            })

            this.dialogVisible = false
            this.fetchData()
          }
        })
      },
      onApprove(obj, approve) {
        this.approveForm = Object.assign(this.approveForm, approve)
        this.approveForm.selectAssigneeList = [approve.nextUser]
        completeItem(this.approveForm).then(r => {
          Message({
            message: '审批成功！',
            type: 'info'
          })
          this.dialogVisible = false
          this.fetchData()
        })
      },
      fetchData() {
        this.listLoading = true
        const param = this.search
        doneList(param).then(response => {
          if (response.code === 200) {
            this.list = response.data.content
          }
          this.listLoading = false
        })
      }
    }
  }
</script>

<style lang="scss">
  .leave-apply {
    .search-item {
      margin-right: 10px;
    }
  }
</style>
